<html>

<head>
 
<title>js—对象 专项练习</title>
<meta charset="utf-8">
<style>
.practice-content {
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.practice-title {
  text-align: center;
  background: #ffecf5;
  box-shadow: #fff7fb;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}

.practice-information {
  margin-top: 20px;
  text-align: center;
  background: #ffecf5;
  box-shadow: #fff7fb;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}

.information {
  margin-top: 20px;
  text-align: center;
  background: #ffecf5;
  box-shadow: #fff7fb;
  height: 400px;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
</style>

</head>

 <body>

<div class="practice-content">
	<div class="practice-title">
		js—对象 专项练习
	</div>
	
	<div class="practice-information">
		相关参考资料
	</div>
	
	<div class="information">
		<p>
			<a target="_blank" href='https://www.cnblogs.com/amujoe/p/11070743.html'>https://www.cnblogs.com/amujoe/p/11070743.html</a>
		</p>
		<p>
			<a target="_blank" href='https://www.toutiao.com/i6705643806185751047'>https://www.toutiao.com/i6705643806185751047</a>
		</p>
		<p>
			<a target="_blank" href='https://www.toutiao.com/i6711810640672997900'>https://www.toutiao.com/i6711810640672997900</a>
		</p>
		<p>
			<a target="_blank" href='https://www.toutiao.com/i6707534273504608771'>https://www.toutiao.com/i6707534273504608771</a>
		</p>
		<p>
			<a target="_blank" href='https://www.cnblogs.com/pssp/p/5216085.html'>https://www.cnblogs.com/pssp/p/5216085.html</a>
		</p>
		<p>
			<a target="_blank" href='https://www.cnblogs.com/joyco773/p/6482879.html'>https://www.cnblogs.com/joyco773/p/6482879.html</a>
		</p>
	</div>
	
	<div id='id1' style="background:#000000;width:30px;height:30px;transform:rotate(30deg)">123</div>	
	
<input type='text' onkeyup='clearNoNum(this)'/>


 
</div>

<script>
	var a = 1000;

	/**
	 * 数据类型
	 * 1、boolen
	 * 2、数字
	 * 3、null
	 * 4、字符串（String）
	 * 5、函数（Function）
	 * 6、对象（Object）
	 * 7、数组（Array）
	 */

	function aa() {
		console.log("aa-->", this);
	}

	var A = {
		a: 1,
		show: this.a,
		b: function() {
		console.log(this);
		},
		c: {
		a: 6,
		show: this.a,
		c1: function() {
		console.log(this);
		},
		c2: function() {
		console.log(this.a * 10);
		}
		}
	};

	var B = A;

	B.a = 11;

	console.log(A.c.c2());

	//aa();
	//A.b();
	//A.c.c1();
	//A.c.c2();

	var o = {
		a: 10,
		b: {
		a: 12,
		fn: function() {
		  console.log(this.a); //undefined
		  console.log(this); //window
		}
		}
	};
	o.b.fn(); //函数执行时，是在o.b下的，所以此时的this指向b==(b是函数执行的最近的对象)
	var j = o.b.fn;
	j(); //函数执行时，是在window下的，所以此时的this指向window

	//=================================
	var obj = {
		name: "xiaoming",
		age: 18,
		110: "222",
		show: function(girlfriend) {
		console.log(this.name + "的女朋友是" + girlfriend);
		}
	};
	// 访问属性值
	console.log(obj["name"], "-->name"); // 输出："xiaoming"
	var age = "age";
	console.log(obj[age], "-->age"); // 输出：18
	console.log(obj["110"], "-->属性名称是数字110"); // 输出："222"

	//var index = 0;
	function fun() {
	  // 此处的this代表就是全局对象window
		this.index = 12;
	}
	fun();
	console.log(index); // 输出：12s

	var point = {
		x: 3,
		y: 4,
		moveTo: function(x, y) {
			this.x += x;
			//x=1;this.x=3，y=2;this.y=4；
			this.y += y;
			//this.y = this.y + y
		}
	};

	point.moveTo(1, 2);
	console.log("x: " + point.x + " y: " + point.y); // 输出：x: 4 y: 6

	// 1、遍历对象
	var obj = {
		name: "xiaoming",
		age: 18,
		sex: "男",
		tel: "18911450210"
	};
	// for...in循环遍历
	for (var attr in obj) {
	  //attr=name,age,sex ，，对象属性
		if (typeof obj[attr] != "function") {
			console.log("属性操作attr=" + attr + "：" + obj[attr]);
		}
	}
	// 2.遍历数组
	var arr = ["11", "22", "33", "44", "55"];
		for (var attr in arr) {
		//attr=0,1,2,3,4 数组下标
		// console.log(arr[attr]);
	}

	function foo() {
		var a = "foo";
		console.log(this.a);
	}
	function doFoo(fn) {
		// fn 其实引用的是foo
		var a = "doFoo";
		fn(); // <-- 调用位置！
	}
	var obj = {
		a: "obj",
		foo: foo
	};
	var a = "oo, global"; // a 是全局对象的属性
	doFoo(obj.foo); // "oops, global"

	function foo(obj) {
		console.log(this.a);
	}
	var obj = {
		a: 2
	};
	var a = "window";
	foo.call(obj); // 2
	foo(obj); //window

	function foo() {
		console.log(this.a, "==foo=");
	}
	var a = 2;
	var o = { a: 3, foo: foo };
	var p = { a: 4 };
	o.foo(); // 3
	(p.foo1 = o.foo)(); // 2
	//赋值表达式p.foo = o.foo的返回值是目标函数的引用，
	//因此调用位置是foo()而不是p.foo()或者o.foo()。
	//所以这时候会执行默认绑定，把this绑定在全局。

	function add(a, b) {
		return a + b;
	}
	function sub(a, b) {
		return a - b;
	}
	var a1 = add.apply(sub, [4, 2]); //sub调用add的方法
	var a2 = sub.apply(add, [4, 2]);
	console.log(a1); //6
	console.log(a2); //2

	/*call的用法*/
	var a3 = add.call(sub, 4, 2);
	console.log(a3); //6

	function Base() {
		this.name = "base";
		this.base = 1991;
		this.sayHello = function() {
		console.log("Hello " + this.name);
		};
	}
	Base.prototype.showName = function() {
		console.log(this.name);
	};
	var objBase = new Base();

	console.log(objBase);
	//在原型中定义的属性不会被 console.log 作 为对象的属性输出
	//base
	//Hello base
	//{ name: 'base', base: 1991, sayHello: [Function] }
	//sub
	//{ name: 'sub' }

	//数组是否包含某个值
	//实际用法：

	//arr.find(function(value) {

	//if(value === 要查找的值) {

	//则包含该元素
	//}
	//})
	var arr = [1, 5, 10, 15];
	var val = arr.find(function(item, index, arr) {
		return item > 9;
	}); // 10
	console.log(val, "==find==val====");

	//包含返回true, 不包含返回false
	var flg = arr.includes(5);
	console.log(flg, "===includes=flg====");

	//JS之判断json对象中是否含有某个key值
	var json = { key1: "val1", key2: "val2", key3: "val3" };

	if (json.hasOwnProperty("key1")) {
		console.log(json["key1"], "====对象检测key==");
	}

	//清楚非数字内容，输入合法的小数
	function clearNoNum(obj) {
	  obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
	  // obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
	  // obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
	  //  obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
	  //  if (obj.value.indexOf(".") < 0 && obj.value != "") {
		//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
	  //   obj.value = parseFloat(obj.value);
	  //}
	  console.log(obj.value, "==obj.value==");
	}

	console.log("7".indexOf("."), "=-1= indexOf.=");

	var obj12 = {
	   a: 1,
	   b: 2,
	   c: {
	 	 c1: 3
	   }
	};
	var obj1 = obj12;
	obj1.a = "a1";
	obj1.c.c1 = "c1";
	console.log(obj1, obj12, "====obj1,iobj=浅copy一个值变化，两个对象都变化==");

	var objData = {
	   flag: 123, //打开对话框的标识 0：关闭；1：结算；2：会员；3：数量；
	  // width: "", //对话框的宽度
	   disFlag: 0, //优惠标志 0：不是，1：是
	   hadTitle: 1, //对话框的头部0:没有，1：有
	   title: "",

	   data: {} //需要处理的数据
	};

	console.log(typeof definded == "undefined", "===defined====");

	console.log(
	   parseFloat("-123.12"),
	   parseFloat("-123.0"),
	   "==parseFloat(-123.12)(-123.0)===="
	);

	var obj22 = {
	   a: 1,
	   b: 2,
	   c: {
			c1: {
		        c11: 5
		    }
	   }
	};

	console.log(
	   obj22.c["c1"].c11,
	   "====obj[key].key混合使用[]和'.'获取属性值ok？？===="
	);

	console.log((123.123).toFixed(2),(123).toFixed(2), "====toFixed(2)====");

	var arr1 = [1,2,3];
	var arr2 = arr1;
	arr2[0] = 9;
	arr1[5] = 10;
	console.log(arr1,arr2,'===arr1,arr2=数组也是引用数据类型===')
	
	var arr = [
		{
			name:'name2',
			age:25,
		},
		{
			name:'name1',
			age:15,
		},
		{
			name:'name2',
			age:15,
		}
		
	];
 
	var cb = arr.find(item => item.name === 'name2');
		console.log(cb,'====cb=find=有，返回的是第一个查找到的内容。=')
		
	var cb = arr.find(item => item.name === 'name3');
		console.log(cb,'====cb2=find=无，返回undefined=')

    var arr1 = arr.filter(item => item.name === 'name2');
		console.log(arr1,'=====filter=有，返回过滤出来的内容，形成新的数组=')
	var arr1 = arr.filter(item => item.name === 'name3');
		console.log(arr1,'=====filter=无，返回空数组=')
			console.log(arr,'====filter后，原数组没有改变===')
	//arr.includes(searchElement, fromIndex),fromIndex：下标，可选；返回boolean类型
	 var arr = ['1','2','3'];
	 //查询对象不行
	var arr1 = arr.includes('1');
	console.log(arr1,'=====includes=有，返回true===')
	var arr1 = arr.includes('4');
	console.log(arr1,'=====includes=无，返回false===')
	
	
	var arr2 = [4,5];
	console.log(arr.push(arr2),'==数组的合并 concat===')
	console.log(Array('1','2'),'==数组话 ===')
	
	console.log(undefined === undefined ,"====undefined判断===");
	var str = '';
	if(str){
		console.log(str,'===str===')
	}
	
	var arr=[
	{
		name:'1'
	},
	{
		name:'2'
	},
	];
	var item2='';
	arr.forEach(item => {
		if(item.name === '1'){
		return item;
		} 
	});
	console.log(item2,'==item2return===')
	
	console.log(!"",!null,!undefined,'====!空=====')


</script>

  </body>

</html>